
// 透明度轮播的实现
//    css部分
//      5张图放在同一个位置，然后全部隐藏(opacity:0)
//    js部分
//      每隔一段时间，全部隐藏，显示下一张



// 防止点击过快？？？
//    为什么？    一张图片从无到有的时间是.3s(css中的过渡时间)

//    点击的时候，加上判断(flag)   显示完了以后，加一个延时器 (让图片在300ms的时间内显示完成)  flag=true



// 完成轮播的封装
//   注意  获取元素的时候  都用  oBanner.qs()   不能使用document.qs
//   提取参数



function banner(ele, arr, time) {

    // 全局变量
    var index = 0;   // 控制播放第几张图片
    var t;   // 定时器

    var flag = true;



    var oBanner = document.querySelector(ele);
    var oUl = oBanner.querySelector('ul');
    var oOl = oBanner.querySelector('ol');
    var oPrev = oBanner.querySelector('span:first-of-type');
    var oNext = oBanner.querySelector('span:last-of-type');
    console.log(oPrev, oNext);



    // var arr = [1, 2, 3, 4, 5];   // 写5张图片的地址
    // 动态生成li
    var imgHTML = '';
    var dotHTML = '';
    arr.forEach(function (v, i) {
        // ul里面的图片
        imgHTML += `
        <li>
            ${v}
        </li>
    ` ;
        // 小点
        dotHTML += `
        <li></li>
    `
    })
    oOl.innerHTML = dotHTML;
    oUl.innerHTML = imgHTML;


    // 在这里生成了li之后才会有图片和小点
    var oLis = oBanner.querySelectorAll('ol li');
    var oImgs = oBanner.querySelectorAll('ul li');

    // 默认给第一张图片显示
    oImgs[0].classList.add('show');

    // 默认给第一个小点加红色
    oLis[0].classList.add('active');


    autoPlay();


    oNext.onclick = function () {
        if (flag) {
            flag = false;
            clearInterval(t);
            if (index === oLis.length - 1) {
                index = -1;
            }
            index++;
            show();
            autoPlay()
            // 加延时器  因为图片需要300ms才会完全显示  ， 完全显示以后才可以显示下一张
            setTimeout(function () {
                flag = true;
            }, 300)
        }
    }

    oPrev.onclick = function () {
        if (flag) {
            flag = false;
            clearInterval(t);
            if (index === 0) {
                index = oLis.length;
            }
            index--;
            show();
            autoPlay()
            // 加延时器  因为图片需要300ms才会完全显示  ， 完全显示以后才可以显示下一张
            setTimeout(function () {
                flag = true;
            }, 300)
        }
    }



    function autoPlay() {
        t = setInterval(function () {
            index++;
            if (index === oImgs.length) {
                index = 0;
            }
            show();
        }, time)
    }




    function show() {
        // 清除所有的图片
        for (var i = 0; i < oImgs.length; i++) {
            oImgs[i].classList.remove('show');
            oLis[i].classList.remove('active');
        }
        oImgs[index].classList.add('show');
        oLis[index].classList.add('active');
    }


}

